<template>
<div class="wrapper">
    <swiper :options="swiperOption" ref="mySwiper">
	    <swiper-slide v-for="item of swiperList" :key="item.id">
	    	<img class="swipe-img" :src="item.imgUrl" alt="去哪儿门票" style="opacity: 1;">
	    </swiper-slide>
	    <!-- Optional controls -->
	    <div class="swiper-pagination"  slot="pagination"></div>
	    <!--<div class="swiper-button-prev" slot="button-prev"></div>
	    <div class="swiper-button-next" slot="button-next"></div>
	    <div class="swiper-scrollbar"   slot="scrollbar"></div>-->
    </swiper>
</div>	

</template>

<script>
export default{
	name:'HomeSwiper',
	data (){
		return {
			swiperOption:{
				pagination:'.swiper-pagination',
				loop:true
			},
			swiperList:[{id:'0001',imgUrl:'http://img1.qunarzz.com/piao/fusion/1812/d6/daa880b254940402.jpg_750x200_b114308a.jpg'},
			{id:'0002',imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/cc906ec208ff868acd3ccc91da041e16.jpg_750x200_3ef32557.jpg'}
			]
			
		}
	}
}
</script>

<style lang="stylus" scoped>
/*穿透*/
.wrapper >>> .swiper-pagination-bullet-active{
	background: #fff;
}
.swipe-img{
	width:100%
}
.wrapper{
	overflow: hidden;
	width:100%;
	height:0;
	padding-bottom:26.6%;
	background: #eee;
	/*height:26.6%vw*/
}
.wrapper img{
	width:100%;
}
</style>